<template>
  <view class="content">
    <view class="form">
      <view class="form-row">
        <view class="label">
          <image src="/static/icons/date.png" mode="aspectFit"></image>
          <view>日期</view>
        </view>
        
        <view class="value">
          <picker mode="date" :value="affaireDateValue"  @change="datePickerChange">
            <view>{{ affairDateStr }}</view>
          </picker>
        </view>
      </view>
      <view class="form-row">
        <view class="label">
          <image src="/static/icons/name.png" mode="aspectFit"></image>
          <view>名称</view>
        </view>
        <view class="value">
          <input type="text" v-model="affairData.affaire_name" placeholder="输入事务名称" />
        </view>
      </view>
      <view class="form-row">
        <view class="label">
          <image src="/static/icons/change.png" mode="aspectFit"></image>
          <view>方向</view>
        </view>
        <view>
          <radio-group @change="directionChange">
            <label>
              <radio value="self" :checked="affairData.is_me == true" style="transform:scale(0.8)" />自己
            </label>
            <label>
              <radio value="other" :checked="affairData.is_me == false" style="transform:scale(0.8)" />他人
            </label>
          </radio-group>
        </view>
      </view>
      <view class="form-row">
        <view class="label">
          <image src="/static/icons/color.png" mode="aspectFit"></image>
          <view>颜色</view>
        </view>
        <view>
          <radio-group @change="colorChange">
            <label>
              <radio value="#e66669" color="#e66669" :checked="affairData.is_red == true" style="transform:scale(0.8)" />红
            </label>
            <label>
              <radio value="#000000" color="#000000" :checked="affairData.is_red == false" style="transform:scale(0.8)" />黑
            </label>
          </radio-group>
        </view>
      </view>
      <view class="form-row">
        <view class="label">
          <image src="/static/icons/note.png" mode="aspectFit"></image>
          <view>归档</view>
        </view>
        <view>
          <radio-group @change="isDocChange">
            <label>
              <radio value="isDoc" :checked="affairData.is_store == true" color="#FFCC33" style="transform:scale(0.8)" />是
            </label>
            <label>
              <radio value="noDoc" :checked="affairData.is_store == false" color="#FFCC33" style="transform:scale(0.8)" />否
            </label>
          </radio-group>
        </view>
      </view>
    </view>
  
    <view class="btn-action">
      <button
        class="save-btn"
        type="primary"
        @click="saveAffair"
      >确认保存</button>
    </view>
    
    <view v-if="affairData._id" class="del-action">
      <view
        class="del-btn"
        @click="deleteAffair"
      >删除记录</view>
    </view>
  </view>
</template>

<script setup>
  import { reactive, computed } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { dateFormat } from '@/utils';
  import { callCloudFunction } from '@/utils/cloudfunc.js'
  const affairData = reactive({
    _id: '',
    affaire_date: new Date(), // 事务日期
    affaire_name: '', // 事务名称
    affaire_color: '#e66669', // 礼日
    is_red: true,
    is_me: true, // 名
    is_store: false
  })
  
  const affairDateStr =  computed(() => dateFormat(affairData.affaire_date, 'ch', false))
  const affaireDateValue = computed(() => dateFormat(new Date(), '-', true))
  
  onLoad((options) => {
    affairData._id = options._id ? options._id : ''
    if (affairData._id) {
      callCloudFunction({
        name: 'ume-affair',
        data: { action: 'readOne', _id: affairData._id}
      }).then(res => {
        const rec = res.data
        affairData.affaire_date = new Date(rec.affair_date)
        affairData.affaire_name = rec.affair_name
        affairData.affaire_color = rec.affair_color
        affairData.is_red = rec.affair_color == '#e66669'
        affairData.is_me = rec.is_me
        affairData.is_store = rec.is_store
      })
    }
  })
  
  const datePickerChange = (e) => {
    affairData.affaire_date = new Date(e.detail.value)
  }
  const colorChange = (e) => {
    affairData.is_red = e.detail.value == '#e66669'
    affairData.affaire_color = e.detail.value
  }
  const directionChange = (e) => {
    affairData.is_me = e.detail.value == 'self'
  }
  const isDocChange =(e) => {
    affairData.is_store = e.detail.value == 'isDoc'
  }
  
  
  const saveAffair = () => {
    const recData = {
      affair_date: affairData.affaire_date.getTime(),
      affair_name: affairData.affaire_name,
      affair_color: affairData.affaire_color,
      is_me: affairData.is_me,
      is_store: affairData.is_store,
    }
    if (!recData.affair_name) {
      uni.showModal({
        title: '错误',
        content: '请填写事务名称!'
      })
      return 
    }
    let action = 'create'
    if (affairData._id) {
      action = 'update'
      recData._id = affairData._id
    }
    // console.log('recData:', recData);
    callCloudFunction({
      name: 'ume-affair',
      data: { action, affair_data: recData}
    }).then(res => {
      uni.showModal({
        title: '结果',
        content: res.message,
        showCancel:false,
        success: () => {
          if (res._id) {
            uni.navigateBack()
          }
        }
      })
    })
  }
  const confirmDeleteRecord = () => {
    callCloudFunction({
      name: 'ume-affair',
      data: {action: 'delete', _id: affairData._id}
    }).then(res => {
      uni.showModal({
        title: '提示',
        content:res.message,
        showCancel:false,
        success: () => {
          uni.navigateBack()
        }
      })
    })
  }
  
  const deleteAffair = () => {
    uni.showModal({
      title: '警告',
      content: '确定删除吗?操作不可恢复!',
      success: (modelRes) => {
        if (modelRes.confirm) {
          confirmDeleteRecord()
        }
      }
    })
  }
</script>

<style lang="scss">
  .content {
    .form {
      padding: 20rpx;
      .amount {
        padding-left: 50rpx;
        display: flex;
        align-items: center;
        color: #3c7a03;
        font-weight: 700;
        .symbol {
          font-size: 32rpx;
          margin-right: 10rpx;
        }
        .input {
          font-size: 50rpx;
          height: 100rpx;
        }
      }
      .form-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        line-height: 70rpx;
        margin-bottom: 20rpx;
        border-bottom: 1px solid #eee;
        .label {
          width: 160rpx;
          display: flex;
          align-items: center;
          flex-direction: row;
          color: #555;
          font-weight: 700;
          font-size: 28rpx;
          image {
            width: 50rpx;
            height: 50rpx;
            margin-right: 10rpx;
          }
        }
        .value {
          width: 100%;
          height: 60rpx;
          margin-left: 20rpx;
          input {
            height: 60rpx;
          }
        }
        .multi-box {
            display: flex;
            .picker {
              flex: 1;
            }
            .right {
              margin-left: auto;
              color: #3c7a03;
              font-size: 28rpx;
            }
          }
      }
    }
  
    .btn-action {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 50rpx;
        .save-btn {
          width: 50%;
        }
      }
    .del-action {
      display: flex;
      justify-content: center;
      align-items: center;
      .del-btn {
        margin-top: 50rpx;
        color: #ff6433;
      }
    }
  }
</style>